<script lang="ts" setup>
import { getPracticeMetadata } from '@/api/study/studySquare';
import { onMounted, ref } from 'vue';
import type { PracticeItem } from '@/views/Square/PracticeSquare/home/PracticeItem';
import PracticeCard from '@/views/Square/PracticeSquare/home/PracticeCard.vue';
import { message } from 'ant-design-vue';

const searchQuery = ref<string>('');
const filterOptions = ref<{ tagName: string, tagId: string }[]>([]);
const selectedFilter = ref<string>('全部');
const currentPageIndex = ref<number>(1);
const practiceItems = ref<PracticeItem[]>([]);
const columnNum = ref<number>(3);

const fetchPracticeMetadata = async () => {
  const requestBody = {
    keywords: searchQuery.value || '',
    tag: selectedFilter.value === '全部' ? '' : selectedFilter.value,
    page: currentPageIndex.value.toString(),
    size: '18',
  };

  try {
    const response = await getPracticeMetadata(requestBody);

    practiceItems.value = response.records;
  }
  catch (error) {
    console.error('Failed to fetch practice metadata:', error);
    message.error('获取实训数据时出现错误');
  }
};

const fetchFilterOptions = async () => {
  filterOptions.value = [{ tagName: '全部', tagId: '' },
    { tagName: '软件工程', tagId: '1' },
    { tagName: '语音大模型', tagId: '2' },
    { tagName: '视觉大模型', tagId: '3' },
    { tagName: '百炼智能体', tagId: '4' }];
}

const onAdviceBtnClicked = () => {
  window.open(import.meta.env.VITE_ADVICE_URL, '_blank');
}

const onSearchBtnClicked = () => {
  currentPageIndex.value = 1;
  fetchPracticeMetadata();
}

const onFilterBtnClicked = (option: string) => {
  selectedFilter.value = option;
  currentPageIndex.value = 1;
  fetchPracticeMetadata();
}

onMounted(() => {
  fetchPracticeMetadata();
  fetchFilterOptions();
})
</script>

<template>
  <a-layout v-show="$route.meta.showHome" class="home-layout flex flex-col overflow-auto">
    <div class="header-section">
      <div class="flex flex-row justify-between items-center mx-4 my-2">
        <!-- 面包屑导航 -->
        <a-breadcrumb class="text-3xl font-bold flex items-center gap-2">
          <a-breadcrumb-item class="flex items-center relative">
            实训广场
            <img
              src="@/assets/title_star.svg"
              alt="实训广场"
              class="w-6 h-6 absolute -right-6"
            >
          </a-breadcrumb-item>
        </a-breadcrumb>
        <div class="flex flex-row gap-2">
          <a-button type="primary" style="width: 30%;" @click="onAdviceBtnClicked">
            提建议
          </a-button>
          <!-- 搜索框 -->
          <a-input-search
            v-model:value="searchQuery"
            placeholder="搜索实训项目"
            :enter-button="true"
            @search="onSearchBtnClicked"
          />
        </div>
      </div>

      <!-- 标签过滤器 -->
      <a-flex class="flex-wrap gap-2 mx-4">
        <a-button
          v-for="option in filterOptions"
          :key="option.tagId"
          :type="option.tagName === selectedFilter ? 'primary' : 'default'"
          style="font-size: 14px;border: none;"
          @click="onFilterBtnClicked(option.tagName)"
        >
          {{ option.tagName }}
        </a-button>
      </a-flex>
    </div>

    <!-- 实训Market -->
    <div class="practice-list-container">
      <!-- 先使用一层div包裹，再使用a-row和a-col -->
      <div class="mx-4">
        <a-row :gutter="[10, 10]">
          <a-col v-for="item in practiceItems" :key="item.customPrimary" :span="24 / columnNum" :xxl="6" :xl="8" :lg="8" :md="12" :sm="16" :xs="16">
            <PracticeCard :practice-item="item" />
          </a-col>
        </a-row>
      </div>
    </div>
  </a-layout>

  <RouterView />
</template>

<style scoped lang="scss">
.home-layout {
  background-color: transparent;
  height: 100%;
}

.header-section {
  flex-shrink: 0;
}

.practice-list-container {
  flex: 1;
  overflow-y: auto;
  min-height: 0; // 重要：确保flex子元素可以正确滚动
  margin-top: 1rem;
  margin-bottom: 1rem;
}
</style>
